require.config({
    paths:{
        "jquery":"../lib/jquery.min",
        "swiper":"../lib/swiper",
        "mode":"module"
    }
})

require(['jquery'],function($){
    $(function(){
        require(['mode'],function(myMode){
            myMode.baseMode()
           //这里写本页面专用的js
            //全选按钮
            $('.catalist_all').click(function(){
                location.href = './goodlist.html' + myMode.info()
            })
            //购物袋按钮 -- 跳转页面功能
            $('.bag').click(function(){
                location.href = './cart.html' + myMode.info()
            })
            //登录框登录按钮
            $('#logo').click(function(){
                location.href = './' + myMode.info()
            })
             //自己定义的动作
            //左侧导航
            $('.left_nav_item').click(function(){
                // 页面平滑的滚动到相应的位置
                $('body,html').animate({scrollTop: $("."+$(this).attr("id")).offset().top-40}, 300); 
                //这里减去的40是因为 头部header：position:fixed, headbox: margin-top:40往下拉的。
            })
            $(document).scroll(function() {/* 监听滚动 */
            if($(document).scrollTop()>=500){  //页面向下滚动500才显示左导航栏
                $('.left_nav').show()
            }else{
                $('.left_nav').hide()
            } 
            //滚动条滑到底部
            if ($(document).scrollTop()+ $(window).height() >= $(document).height() ){ 
                $(".left_nav_item").removeClass('active')
                $(".left_nav_item:last").addClass('active')
                return;
            }
            //滚动条距离顶部的高度
            var top = $(document).scrollTop();  
            $(".container_inner>ol").each(function (i,item) {
                if($(this).offset().top <= top+41){   //这里补上41,
                    $(".left_nav_item").removeClass('active')
                    $("#"+item.classList[0]).addClass('active');
                }
            })
            if($(document).scrollTop()>=1000){  //页面向下滚动500才显示左导航栏
                $('#back').show()
            }else{
                $('#back').hide()
            }
            });
             //渲染页面，加载商品
            $.ajax({
                url:"./data/goods.json",
                type:"get",
                dataType:"json",
                success:function(data){   //data就是请求到的整个json文件

                //加载到轮播图商品列表
                let cataAll = data["coursel"]  
                $.each(cataAll,function(index,arr){  //each遍历数组，index是下标
                    // console.log(arr)  //访问到每一个大块元素-->对应item_content
                    let cataListAll = ''
                    $.each(arr,function(index,good){ 
                        let temp = `<div class="catagood">
                            <img src=${good.src} alt="">
                            <span>${good.title}</span>
                        </div>`
                        cataListAll+=temp
                    })
                    $('.item_content').eq(index).html(cataListAll)
                }) 
                //请求所有商品。
                let goods = data["goods"]  
                //加载到 扫地机器人模块
                let robot = goods["robot"]
                //扫地机器人模块的第一张图
                let sweep = `<li class="base_up">
                    <img src="./imgs/111.jpg" alt="">
                </li>`
                $.each(robot,function(index,obj){
                    // 通过a标签传数据也太能作了(*/ω＼*)
                    //判断本地是否有账户数据缓存，并且是登录状态
                    
                    let temp = `
                        <li class="base_up">
                        <div class="img_outer">
                            <a href="./good.html?id=${obj["id"]}&price=${obj["price"]}&title=${obj["title"]}&m-title=${obj["m-title"]}&o-price=${obj["o-price"]}`+myMode.info()+`">
                            <img src=${obj["src"]} alt="">
                            </a>
                        </div>
                        <div class="good_dsc"><h2>${obj["title"]}</h2>
                        <h3>${obj["m-title"]}</h3>
                        <p>￥${obj["price"]}<del>￥${obj["o-price"]}</del></p>
                        </div>
                    </li> `
                    sweep+=temp
                })
                $('.sweep ul:first').html(sweep)

            //加载到‘更多商品’列表
                let moreAll = goods["moregoods"] 
                let moregoods = ''
                $.each(moreAll,function(index,obj){
                    let temp = `
                            <li class="base_up">
                            <div class="img_outer">
                            <a href="./good.html?id=${obj["id"]}&price=${obj["price"]}&title=${obj["title"]}&m-title=${obj["m-title"]}&o-price=${obj["o-price"]}`+myMode.info()+`"><img src=${obj["src"]} alt=""></a>
                            </div>
                            <div class="good_dsc"><h2>${obj["title"]}</h2>
                            <h3>${obj["m-title"]}</h3>
                            <p>￥${obj["price"]}<del>￥${obj["o-price"]}</del></p>
                            <button>限时打折</button>
                            </div>
                        </li>
                    `
                    moregoods+=temp
                })
                $('.more_goods ul:first').html(moregoods)
                }
            })

         })
        // 加载swiper轮播图
        require(['swiper'],function(Swiper){
            var mySwiper = new Swiper('.swiper-container', {
                autoplay: {
                    disableOnInteraction: false,
                },
                loop : true,
                effect: 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                preventClicksPropagation : false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable :true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        })
    })
})



